<!--
  * @Description: 招聘-企业注册
  * @Author: rcc
  * @Date: 2024-08-13 17:42:35
  * @FilePath: /rc-recruitment/pages/user/firm/firm.vue
-->

<template>
  <view class="p-h24">
    <RcNavigation title="企业注册" iconColor="white" color="#fff" bgColor="#1269FF" />

    <view class="step-view m-t40">
      <view class="line" />

      <view class="dot-view flex-sb p-h40">
        <view class="flex-d-c" :class="{ 'dot-el': step === 1 }">
          <view class="dot" />
          <text class="m-t20 text-700-428">基本信息</text>
        </view>
        <view class="flex-d-c" :class="{ 'dot-el': step === 2 }">
          <view class="dot" />
          <text class="m-t20 text-700-428">企业认证</text>
        </view>
        <view class="flex-d-c" :class="{ 'dot-el': step === 3 }">
          <view class="dot" />
          <text class="m-t20 text-700-428">手机验证</text>
        </view>
      </view>
    </view>

    <template v-if="step === 1">
      <view class="card flex">
        <text class="flex-1 text-700-130">创建基本信息</text>
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">姓名</text>
        <input v-model="formData1.nickname" class="text-r" type="text" placeholder="请填写姓名" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">企业名称</text>
        <input v-model="formData1.title" class="text-r" type="text" placeholder="请填写公司名称" />
      </view>
      <view class="card flex" @click="openBizNaturePicker(formData1.nature_id)">
        <text class="flex-1 text-700-130">企业性质</text>
        <text v-if="formData1.nature_id" class="text-400-128">{{ getNatureName(formData1.nature_id) }}</text>
        <text v-else class="text-400-428">请选择企业性质</text>
        <image class="square-30" src="@/static/images/public/arrow-3.png" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">企业地址</text>
        <input v-model="formData1.address" class="text-r" type="text" placeholder="请填写企业地址" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">企业规模</text>
        <input v-model="formData1.guimo" class="text-r" type="text" placeholder="请填写企业规模" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">我的职务</text>
        <input v-model="formData1.duties" class="text-r" type="text" placeholder="请填写职务" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">我的邮箱</text>
        <input v-model="formData1.email" class="text-r" type="text" placeholder="请填写接收简历邮箱" />
      </view>
    </template>

    <template v-if="step === 2">
      <view class="flex-sb">
        <view class="flex-d-c" @click="clickUpload(1)">
          <image v-if="formData2.sfz_z === ''" class="id-img" src="@/static/images/mine/front.png" />
          <image v-else class="id-img" :src="formData2.sfz_z" mode="aspectFill" />
          <text class="m-t30 text-400-424">手持身份证头像面</text>
        </view>
        <view class="flex-d-c" @click="clickUpload(2)">
          <image v-if="formData2.sfz_f === ''" class="id-img" src="@/static/images/mine/reverse.png" />
          <image v-else class="id-img" :src="formData2.sfz_f" mode="aspectFill" />
          <text class="m-t30 text-400-424">手持身份证国徽面</text>
        </view>
      </view>

      <view class="card flex m-t30">
        <text class="w-150 text-700-130">真实姓名</text>
        <input v-model="formData2.true_name" class="flex-1" type="text" placeholder="请输入真实姓名" />
      </view>
      <view class="card flex">
        <text class="w-150 text-700-130">身份证号</text>
        <input v-model="formData2.sfz_num" class="flex-1" type="text" placeholder="请输入身份证号码" />
      </view>

      <view class="m-t40">
        <text class="text-700-130">上传企业营业执照</text>
        <view class="license flex-d-c m-t24" @click="clickUpload(3)">
          <template v-if="formData2.license === ''">
            <image class="square-24" src="@/static/images/user/add.png" />
            <text class="m-t20 text-400-424">点击上传</text>
          </template>
          <image v-else class="w h" :src="formData2.license" mode="aspectFill" />
        </view>
      </view>

      <view class="m-t40">
        <text class="text-700-130">企业简介</text>
        <textarea v-model="formData2.intro" class="synopsis m-t24" placeholder="请输入"></textarea>
      </view>

      <view class="m-t40">
        <text class="text-700-130">上传企业照片</text>
        <view class="photo flex-d-c m-t24" @click="clickUpload(4)">
          <template v-if="formData2.images === ''">
            <image class="square-24" src="@/static/images/user/add.png" />
            <text class="m-t20 text-400-424">点击上传</text>
          </template>
          <image v-else class="w h" :src="formData2.images" mode="aspectFill" />
        </view>
      </view>
    </template>

    <template v-if="step === 3">
      <view class="card flex m-t10">
        <image class="square-40" src="@/static/images/public/phone.png" />
        <view class="line" />
        <text class="m-r20 text-700-130">+86</text>
        <input v-model="formData3.mobile" class="flex-1" type="text" placeholder="请输入手机号" />
      </view>
      <view class="card flex">
        <image class="square-40" src="@/static/images/public/safety.png" />
        <view class="line" />
        <input v-model="formData3.captcha" class="flex-1" type="text" placeholder="图形验证码" />
        <image class="captcha" :src="captchaUrl" mode="aspectFill" @click="refreshCaptcha" />
      </view>
      <view class="card flex">
        <image class="square-40" src="@/static/images/public/lock.png" />
        <view class="line" />
        <input v-model="formData3.password" class="flex-1" type="text" password placeholder="请输入密码" />
      </view>
      <view class="card flex">
        <image class="square-40" src="@/static/images/public/lock.png" />
        <view class="line" />
        <input v-model="formData3.passwords" class="flex-1" type="text" password placeholder="请再次输入密码" />
      </view>
      <view class="card flex">
        <image class="square-40" src="@/static/images/public/mail.png" />
        <view class="line" />
        <input v-model="formData3.code" class="flex-1" type="text" placeholder="短信验证码" />
        <view class="send text-700-526" @click="sendCode(formData3.mobile, 2)">{{ codeText }}</view>
      </view>
    </template>

    <view class="flex-c p-b40">
      <RcButton :width="340" :text="step === 3 ? '注册' : '下一步'" @click="nextStep" />
    </view>

    <up-picker ref="bizNaturePickerRef" title="企业性质" keyName="name" :show="showBizNaturePicker"
      :columns="[bizNatureColumns]" @confirm="onBizNaturePickerConfirm" @cancel="closeBizNaturePicker" />
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import type { UserData } from '@/types/api.d.ts'

import useCode from '@/hooks/use-code'
import useUpload from '@/hooks/use-upload'
import useCaptcha from '@/hooks/use-captcha'

import { useBizNature } from './useBizNature'

import RcButton from '@/components/button.vue'
import RcNavigation from '@/components/navigation.vue'

const { chooseImage, uploadImage } = useUpload()
const { captchaUrl, refreshCaptcha } = useCaptcha()
const { codeText, sendCode, clearCodeTimer } = useCode()
const {
  pickerRef: bizNaturePickerRef,
  columns: bizNatureColumns,
  show: showBizNaturePicker,
  open: openBizNaturePicker,
  close: closeBizNaturePicker,
  getSelectedName: getNatureName,
} = useBizNature()

const step: any = ref(1)

const isDisabled = ref(false)
const formData1: any = reactive({
  address: "",
  guimo: "",
  nickname: '',
  title: '',
  nature_id: 0,
  duties: '',
  email: '',
})

const formData2: any = reactive({
  sfz_z: '',
  sfz_f: '',
  true_name: '',
  sfz_num: '',
  license: '',
  intro: '',
  images: '',
})

const formData3: any = reactive({
  mobile: '',
  captcha: '',
  password: '',
  passwords: '',
  code: '',
})

onLoad(() => {
  refreshCaptcha()
})

onUnload(() => {
  clearCodeTimer()
})

const onBizNaturePickerConfirm = (e: any) => {
  const selected = e.value[0]

  formData1.nature_id = selected.id

  closeBizNaturePicker()
}

const clickUpload = async (type: 1 | 2 | 3 | 4) => {
  const { filePath, success } = await chooseImage()

  if (!success) return

  uni.showLoading({ title: '上传中...', mask: true })

  const uploadResult = await uploadImage(filePath)

  uni.hideLoading()

  if (!uploadResult.success) return

  switch (type) {
    case 1:
      formData2.sfz_z = uploadResult.url
      break

    case 2:
      formData2.sfz_f = uploadResult.url
      break

    case 3:
      formData2.license = uploadResult.url
      break

    case 4:
      formData2.images = uploadResult.url
      break

    default:
      break
  }
}

const nextStep = () => {
  if (step.value === 1 && formVerify1()) return
  if (step.value === 2 && formVerify2()) return
  if (step.value === 3 && formVerify3()) return

  if (step.value === 3) {
    submit()
  } else {
    step.value++
  }
}

/**
 * 基本信息验证
 *
 * @returns {boolean} 验证结果.
 */
const formVerify1 = (): boolean => {
  if (formData1.nickname === '') {
    uni.$u.toast('请输入姓名')
    return true
  }

  if (formData1.title === '') {
    uni.$u.toast('请输入公司名称')
    return true
  }

  if (formData1.duties === '') {
    uni.$u.toast('请输入职务')
    return true
  }

  if (formData1.email === '') {
    uni.$u.toast('请输入邮箱')
    return true
  }

  return false
}

/**
 * 企业信息认证
 *
 * @returns {boolean} 验证结果.
 */
const formVerify2 = (): boolean => {
  if (formData2.sfz_z === '') {
    uni.$u.toast('请上传手持身份证头像面')
    return true
  }

  if (formData2.sfz_f === '') {
    uni.$u.toast('请上传手持身份证国徽面')
    return true
  }

  if (formData2.true_name === '') {
    uni.$u.toast('请输入真实姓名')
    return true
  }

  if (formData2.sfz_num === '') {
    uni.$u.toast('请输入身份证号码')
    return true
  }

  if (formData2.license === '') {
    uni.$u.toast('请上传企业营业执照')
    return true
  }

  if (formData2.intro === '') {
    uni.$u.toast('请输入企业简介')
    return true
  }

  if (formData2.images === '') {
    uni.$u.toast('请上传企业照片')
    return true
  }

  return false
}

/**
 * 手机信息认证
 *
 * @returns {boolean} 验证结果.
 */
const formVerify3 = (): boolean => {
  if (isDisabled.value) return true

  if (formData3.mobile === '') {
    uni.$u.toast('请输入手机号')
    return true
  }

  if (formData3.captcha === '') {
    uni.$u.toast('请输入图形验证码')
    return true
  }

  if (formData3.password === '') {
    uni.$u.toast('请输入密码')
    return true
  }

  if (formData3.passwords === '') {
    uni.$u.toast('请再次输入密码')
    return true
  }

  if (formData3.password !== formData3.passwords) {
    uni.$u.toast('密码输入不一致')
    return true
  }

  if (formData3.code === '') {
    uni.$u.toast('请输入短信验证码')
    return true
  }

  return false
}

/**
 * 表单提交
 */
const submit = async () => {
  isDisabled.value = true
  uni.showLoading({ title: '加载中...', mask: true })

  const tag = uni.getStorageSync('indus_tag')

  const data = {
    ...formData1,
    ...formData2,
    ...formData3,
    tag,
  }

  const res = await uni.$u.post<UserData>('/user/companyreg', data)

  if (res.code === 1) {
    console.log(res.data)
    uni.hideLoading()
    uni.navigateTo({ url: "/pages/user/login/login?role=1" })
  } else {
    uni.$u.toast(res.msg)
  }

  isDisabled.value = false
}
</script>

<style lang="scss" scoped>
.step-view {
  position: relative;
  height: 160rpx;
  padding-top: 18rpx;

  .line {
    width: 100%;
    height: 6rpx;
    background-color: #EFEFEF;
  }

  .dot-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .dot {
    position: relative;
    width: 42rpx;
    height: 42rpx;
    border-radius: 50%;
    background-color: #EFEFEF;

    &:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 21rpx;
      height: 21rpx;
      border-radius: 50%;
      background-color: $bg-color-1;
      transform: translate(-50%, -50%);
    }
  }

  .dot-el {
    text {
      color: $text-color-5 !important;
    }

    .dot {
      background-color: $bg-color-2;
    }
  }
}

.card {
  height: 110rpx;
  border-bottom: 1rpx solid $border-color-4;

  .add-view {
    width: 80rpx;
    height: 80rpx;
    background: #ECECEC;
    border-radius: 4rpx;
    border: 1rpx solid #CDCDCD;
  }
}

.id-img {
  width: 313rpx;
  height: 200rpx;
}

.license {
  width: 300rpx;
  height: 198rpx;
  background: #F9F9F9;
  border-radius: 6rpx;
  border: 1rpx solid #CCCCCC;
  overflow: hidden;
}

.synopsis {
  width: 100%;
  height: 314rpx;
  padding: 20rpx;
  border-radius: 6rpx;
  background: #F9F9F9;
  border: 1rpx solid #CCCCCC;
}

.photo {
  width: 160rpx;
  height: 160rpx;
  background: #F9F9F9;
  border-radius: 6rpx 6rpx 6rpx 6rpx;
  border: 1rpx solid #CCCCCC;
}

.card {
  height: 102rpx;
  border-bottom: 1rpx solid $border-color-4;

  .line {
    height: 36rpx;
    margin: 0 20rpx;
    border-left: 1rpx solid $border-color-4;
  }

  .captcha {
    width: 180rpx;
    height: 90rpx;
    border: 1rpx solid $border-color-4;
  }

  .send {
    width: 180rpx;
    text-align: center;
    border-left: 1rpx solid $border-color-1;
  }
}
</style>
